<template>
	<view class="page">
		<view class="h30"></view>
		<view class="flex-center" style="">
			<image style="width: 666rpx;height: 380rpx;" src="https://baxztech.com/bian_admin_api/public/bianmp/test/testB.png"></image>
		</view>
		<view class="h30"></view>
		<view style="text-align: center;font-size: 40rpx;font-weight: bold;">{{testName}}</view>
		<view class="h30"></view>
		<view style="text-align: center;color: #000;">测评时间:{{testTime}}</view>
		<view class="h30"></view>
		<view class="block">
			<view class="main">
				<view class="test-end">
					<view class="end-title">您的测评结果</view>
					<view class="chart-box">
						<view class="chart">
							<l-echart ref="pagechart"></l-echart>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="h30"></view>
		
		<view class="block">
			<view class="main">
				<view class="report-list">
					<view class="report-item" v-for="(item,index) in dem_src" :key="index">
						<view class="item-title">{{item.dem}}</view>
						<view class="report-content">
							<view class="content-item">{{item.evaluate}}</view>
							<view class="content-item">{{item.explain}}</view>
							<view class="content-item">{{item.suggest}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
	export default {
		components: {
			LEchart
		},
		computed: {
			...mapState(['member']),
		},
		data() {
			return {
				testTime:'',
				testName:'',
				recordId: '',
				dem_src: [],
				reportChart: '',
				evaluate: [],
			};
		},
		onLoad(opt) {
			uni.$u.http.post('/client/test_report', {
				id: opt.id,
				phone: this.member.phone
			}).then(res => {
				let dem_src = JSON.parse(res.data.testData[0].dem_src)
				let evaluate = JSON.parse(res.data.testData[0].evaluate)
				this.testTime = uni.$u.timeFormat(res.data.testData[0].end_time, 'yyyy-mm-dd hh:MM')
				this.dem_src = dem_src;
				this.evaluate = evaluate;
				this.testName = res.data.testData[0].name;
				this.chart()
			})
		},
		methods: {
			chart() {
				//筛选最大值
				let dimensionTag = [];
				this.evaluate.forEach(item => {
					if (dimensionTag.indexOf(item.dimension) == -1) {
						dimensionTag.push(item.dimension)
					}
				})
				let chartData = [];
				dimensionTag.forEach(item => {
					let dimensionItem = {
						name: item,
						max: 0
					}
					this.evaluate.forEach(t => {
						if (dimensionItem.name == t.dimension) {
							if (t.score[1] > dimensionItem.max) {
								dimensionItem.max = t.score[1]
							}
						}
					})
					chartData.push(dimensionItem)
				})
				let seriesData = []
				chartData.forEach(item => {
					this.dem_src.forEach(t => {
						if (item.name == t.dem) {
							item.name = t.dem + t.src + '分'
							seriesData.push(t.src)
						}
					})
				})
				let option = {
					grid:{
						left:'10%',
						right:'10%'
					},
					radar: {
						radius: 80,
						indicator: chartData,
						shape: 'circle',
						axisName: {
							color: '#787878'
						},
					},
					series: [{
						type: 'radar',
						data: [{
							value: seriesData,
						}],
						symbol: 'none',
						itemStyle: {
							color: 'rgba(50, 110, 255, 0.4)'
						},
						areaStyle: {
							opacity: 1
						}
					}]
				};
				this.$refs.pagechart.init(echarts, chart => {
					chart.setOption(option);
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 16rpx;
	}

	.main {
		border-radius: 20rpx;
		background-color: #fff;
	}

	.test-end {
		padding: 16rpx;
		// background: url('https://baxztech.com/bian_admin_api/public/bianmp/test-report-bg.png') no-repeat;
		background-size: 100% 100%;
	}

	.end-title {
		height: 48rpx;
		line-height: 48rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		text-align: center;
	}

	.chart-box {
		// height: 600rpx;
		width: 100%;
		// width: 250px;
		padding-top: 20rpx;
	}

	.chart {
		width: 100%;
		height: 100%;
	}

	.report-list {
		margin-top: 10px;
		padding: 12px;
	}

	.report-item {
		padding-bottom: 30px;
	}

	.item-title {
		height: 16px;
		line-height: 16px;
		font-weight: 500;
		font-size: 16px;
		color: #333;
		margin-bottom: 10px;
	}

	.content-item {
		line-height: 20px;
		font-size: 12px;
		color: #666666;
	}
</style>